<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Airsend</title>
    <style>
      *{
        color: white;
        --bgcolor:rgb(71, 71, 170);
        --dkcolor:rgb(46, 46, 107);
        -webkit-user-select: none;
        
      }
      .header{
        -webkit-app-region:drag;
        padding: 0;
        margin: 0;
      }
        body{
          padding: 0;
          margin: 0;
          background-color: var(--bgcolor);
          overflow: hidden;
        }
        .header{
          padding: 0;
          background-color: var(--dkcolor);
          width: 100%;
          height: 20px;
          display: flex;
          flex-flow: row nowrap;
          justify-content: flex-end;
        }
        .header .close{
          width: 20px;
          height: 20px;
          -webkit-app-region: no-drag;
        }
        .close::before{
          content: '';
          position: absolute;
          background-color: white;
          width: 8px;
          height: 2px;
          top: 10px;
        }
        .wrapper{
          width: 100%;
          height: 50%;
          background-color: var(--bgcolor);
          display: flex;
          flex-direction: column;
          align-items: center;
          font-size: 20px;
        }
        .title{
          width:fit-content;
          flex: 1;
          padding: 5px;
        }
        .url{
          display: flex;
          flex-direction: row;
          padding: 5px;
          
        }
        .url_before{
          background-color: var(--bgcolor);
        }
        .url_content{
          width:fit-content;
          flex: 1;
          background-color: var(--dkcolor);
        }
        .qrcode{
          padding: 5px;
        }
        .qrimage{
          width: 200px;
          height: 200px;
        }
        .config{
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-items: center;
          font-size: 12px;
        }
        .folder,.autostart,.autoopen{
          padding: 5px;
          display: flex;
          flex-direction: row;
          align-items: baseline;
        }
        .folder_name{
          max-width: 200px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          text-decoration: underline;
        }
        .footer{
          padding-top: 10%;
          display: flex;
          flex-direction: column;
          align-items: center;
          font-size: 12px;
        }
        .help{
          text-decoration: underline;
          color: rgb(34, 236, 186);
        }
        #log1{
          width: 500px;
          font-size: 10px !important;
          white-space: wrap;
        }
        .dropwrap{
          position: absolute;
          width: 100%;
          height: 100%;
          top:0;left: 0;
          opacity: 0.5;
          background-color: white;
          text-align: center;
          line-height: 100vh;
          color: black;
          visibility: hidden;
        }
    </style>
    <script>
      const { ipcRenderer } = require('electron');
      function back(){
        console.log('hello')
        ipcRenderer.send('app:hide')
      }
      const { remote }=require('electron')
      function openfolder(){
        remote.shell.openExternal(remote.app.FILEPATH)
      }
      function openSendfolder(){
        remote.shell.openExternal(remote.app.SENDPATH)
      }
      function taphelp(){
        remote.shell.openExternal('https://github.com/glink25/Airsend')
      }
    </script>
  </head>
  <body>
    <div class="header">
      <div class="close" onclick="back()"></div>
    </div>

    <div class="wrapper">
        <div class="title">Airsend</div>
        <div class="url">
          <div class="url_before">本地ip地址：</div>
          <div class="url_content" id='url'>192.168.0.1</div>
        </div>
        <div class="qrcode"><img src="" alt="加载中" id='qrcode' class="qrimage"></div>
        <div class="config">
          <div class="folder-wrapper">
            <div class="folder" onclick="openfolder()">文件接收目录：<div class="folder_name" id="folder_name"></div></div>
            <div class="folder" onclick="openSendfolder()">文件发送目录：<div class="folder_name" id="send_name"></div></div>
          </div>
          <div class="else">
            <div class="autostart">允许开机启动：<input type="checkbox" name="autostart" id="as"></div>
            <div class="autoopen">自动打开文件：<input type="checkbox" name="autoopen" id="ao"></div>
          </div>
          
        </div>
        <div class="footer">
          <div class="help" onclick="taphelp()">如何使用？</div>
        </div>
    </div>

    <div class="dropwrap" id="dropwrap">
    </div>
    <script>
      /**
     * 渲染进程
     */
    const fs = require('fs');

    function getProcessInfo() {
        console.log("cpu", process.env)
    }
    const dropwrapper = document.getElementById("dropwrap");
    document.addEventListener('drop', (e) => {
        e.preventDefault()
        dropwrapper.style.visibility='hidden'
        const files = e.dataTransfer.files;
        if (files) {
            console.log('path',files[0].path )
          ipcRenderer.send('dragstart',files[0].path)
        }
    })

    document.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropwrapper.style.visibility='visible'
    })
    dropwrapper.addEventListener('dragleave', (e) => {
        e.preventDefault();
        dropwrapper.style.visibility='hidden'
    })
    </script>
    <script>
      const Store=require('electron-store')
      var store=new Store()

      var url=document.getElementById('url');url.innerHTML=remote.app.ipaddress
      var qrcode=document.getElementById('qrcode');qrcode.src='data:img/png;base64,'+remote.app.qrimage
      
      var as=document.getElementById('as');as.checked=store.get('autostart')
      as.addEventListener('change',function(e){
        store.set('autostart',e.target.checked)
        remote.app.AUTOSTART=store.get('autostart')
        remote.app.setLoginItemSettings({
          openAtLogin:store.get('autostart')
        })
        console.log(remote.app.AUTOSTART)
      })

      var ao=document.getElementById('ao');ao.checked=store.get('autoopen')
      ao.addEventListener('change',function(e){
        store.set('autoopen',e.target.checked)
        remote.app.AUTOOPEN=store.get('autoopen')
        console.log(remote.app.AUTOOPEN)
      })

      var dir=document.getElementById('folder_name');dir.innerHTML=store.get('folder')
      dir.addEventListener('click',function(e){
        //ipcRenderer.send('choosepath')
        e.cancelBubble=true
        async function opendialog(){
          const result=await remote.dialog.showOpenDialog({
            properties: ['openDirectory'],
          }).then(e=>{
            if(!e.canceled){
              dir.innerHTML=e.filePaths[0]
              store.set('folder',e.filePaths[0])
              remote.app.FILEPATH=store.get('folder')
              
            }
            console.log(remote.app.FILEPATH)
          })
        }
        opendialog()
      })

      var send_dir=document.getElementById('send_name');send_dir.innerHTML=store.get('sendpath')
      send_dir.addEventListener('click',function(e){
        //ipcRenderer.send('choosepath')
        e.cancelBubble=true
        async function openSendDialog(){
          const result=await remote.dialog.showOpenDialog({
            properties: ['openDirectory'],
          }).then(e=>{
            if(!e.canceled){
              send_dir.innerHTML=e.filePaths[0]
              store.set('sendpath',e.filePaths[0])
              remote.app.SENDPATH=store.get('sendpath')
              
            }
            console.log(remote.app.SENDPATH)
          })
        }
        openSendDialog()
      })
    </script>
  </body>
  
</html>
